/* =========================
 * WebStorm Darcula for Vue3
 * ========================= */
pre {
  code {
    &.hljs {
      width: max-content;
      overflow: auto;
      display: block;
      padding: 1em;
      color: #000000;
      font-size: 15px;

      // 蠕动渐变背景
      background-size: 200% 200%;

      // 数字
      .hljs-number {
        color: #cd0000;
      }

      // 布尔值
      .hljs-literal {
        color: #ff009c;
      }

      .hljs-symbol {
        color: #830b9e;
      }

      .hljs-bullet {
        color: #ac4343;
      }

      // 一个对象的属性
      .hljs-property {
        color: #731313;
      }

      /* ---------- 关键字 ----------
       * const、let、import、export、if、for… */
      .hljs-keyword {
        color: #0060ae;
      }

      /* ---------- 标签 ----------
       * html、vue、script、style */
      .hljs-selector-tag {
        color: #ff0000;
      }

      .hljs-deletion {
        color: #6c431d;
      }

      /* ---------- 变量 ----------
* 变量名、模板变量、链接 */
      .hljs-variable,
      .hljs-template-variable,
      .hljs-link {
        color: #629755;
      }


      /* ---------- 注释 ----------
* // 、<!-- --> 、/* *\/ */
      .hljs-comment,
      .hljs-quote {
        color: #090101;
        font-style: italic;
      }


      /* ---------- 元信息 ----------
       * @decorator、#region、#if… */
      .hljs-meta {
        color: #c600fb;
      }

      /* ---------- 字符串 ----------
       * "foo"、'bar'、`baz` */
      .hljs-string,
      .hljs-attribute,
      .hljs-addition {
        color: #0034c3;
      }

      /* ---------- 定义 ----------
       * 函数名、类名、接口名、类型名 */
      .hljs-section,
      .hljs-title,
      .hljs-type {
        color: #ff0000;
      }

      /* ---------- 标签/选择器 ----------
       * <template>、<script>、div、.class、#id */
      .hljs-name,
      .hljs-selector-id,
      .hljs-selector-class {
        color: #af3a00;
      }

      /* ---------- Vue 专用 ----------
       * v-if、v-for、@click、:prop、#slot */
      .hljs-built_in,
      .hljs-tag .hljs-attr {
        color: #0060ae;
      }

      /* ---------- 插值 ----------
       * {{  }}  */
      .hljs-template-tag,
      .hljs-template-variable {
        color: #C77DBB;
        font-weight: 500;
      }

      /* ---------- 强调/加粗 ----------
       * *italic*、**bold** */
      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: bold;
      }
    }
  }
}




